<script setup lang="ts">
import logoUrl from "@@/assets/images/layouts/logo.png"
import { removeToken } from "@@/utils/cache/cookies.ts"
import { useUserStore } from "@/pinia/stores/user.ts"
import {onBeforeMount} from "vue";
const userStore = useUserStore()
const username = ref("")
const token = ref("")
function logout() {
  token.value = ""
  username.value = ""
  removeToken()
  userStore.setToken("") // token-admin
  userStore.setUsername("")
}
onBeforeMount(() => {
  username.value = userStore.getUserName().value
  token.value = userStore.token
})
const props = defineProps({
  activeId: Number,
});
</script>

<template>
  <div class="header">
    <div class="w-1200 header-content">
      <a href="/#/" class="logo"><img :src="logoUrl" width="47" height="47"></a>
      <div class="nav">
        <ul>
          <li class="active0" v-if="activeId == 1"><a href="/#/ai" class="router-link-active router-link-exact-active">AI</a></li>
          <li v-if="activeId != 1"><a href="/#/ai">AI</a></li>
          <li class="active1" v-if="activeId == 2"> <a aria-current="page" href="/#/info" class="router-link-active router-link-exact-active">资讯</a> </li>
          <li class="" v-if="activeId != 2"> <a href="/#/info" >资讯</a> </li>
          <li class="active2" v-if="activeId ==3"><a href="/#/study">学习</a></li>
          <li v-if="activeId != 3"><a href="/#/study">学习</a></li>
          <li class="active3" v-if="activeId == 4"><a href="/#/pms">PMS</a></li>
          <li v-if="activeId != 4"><a href="/#/pms">PMS</a></li>
        </ul>
      </div>
      <div class="user">
        <div class="Login noLogin" v-if="token === ''">
          <a href="/#/login" class="login">登录</a> |
          <a href="/#/register" class="register">注册</a>
        </div>
        <div class="Login" v-if="token !== ''">
          {{ username }}
          <a href="javascript:void(0)" @click="logout()">退出</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100%;

}

.w-1200 {
  width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.header {
  width: 100%;
  height: 64px;
  background: #fff;
}

  .header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }

  .nav {
    width: 700px;
    display: flex;
    flex-direction: row;
    height: 64px;
    color: #0e0e0e;
  }

  .user {
    width: 160px;
  }

  element.style {
    height: 448px;
  }

  .nav ul li {
    position: relative;
  }

  .nav ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
  }
.header .header-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header .header-content .logo {
  width: 100px;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
}
.nav ul li.active0 a {
  color: #00bcfb;
}
.nav ul li a {
  font-family: MiSans;
  font-size: 18px;
  color: #000;
  line-height: 24px;
  cursor: pointer;
  text-decoration: none;
}
.nav ul li:after {
  display: block;
  content: "";
  width: 50px;
  height: 4px;
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -25px;
  border-radius: 2px;
}
.active0:after {
  background-color: #00bcfb;
}
.active1:after {
  background-color: #20d5a8;
}
.active2:after {
  background-color: #20d5a8;
}
.active3:after {
  background-color: #8145e5;
}
.active4:after {
  background-color: #20d5a8;
}
.isLogin .avatar-dropdown .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.isLogin .avatar-dropdown .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}
.isLogin .avatar-dropdown {
  display: flex;
  align-items: center;
  position: relative;
}
.isLogin .nikename {
  font-family: MiSans;
  font-size: 18px;
  color: #000;
  line-height: 24px;
}
</style>
